@charset "utf-8";
@import "reset";
@import "common";

.wrap{
    main{
        .search{
            .search-box{
                margin: 0 auto;
                width: vw(266);
                position: relative;
            input{
                width: vw(266);
                height: vw(51);
                line-height:vw(51);
                border: 2px solid $color;
                border-radius: vw(25);
                box-sizing: border-box;
                padding-right: vw(35);
                padding-left: vw(14);
                font-size: vw(24);
                text-align: center;
            }
            i{
                position: absolute;
                right: vw(12);
                top: vw(8);
                color: $color;
            }
            }
            .together-srh{
                margin-top: vw(33);
                p{
                    font-size: vw(26);
                    text-align: center;
                    font-weight: bold;
                }
                .together-box{
                    width: vw(512);
                    height: vw(134);
                    margin: vw(14) auto;
                    display: grid;
                    grid-template-columns: repeat(4, 25%);
                    grid-template-rows: repeat(2, 50%);
                    .box{
                        width: vw(125);
                        height: vw(64);
                        line-height: vw(64);
                        text-align: center;
                        font-size: vw(20);
                        color: #898989;
                        background-color: #dcdcdc;
                        cursor: pointer;
                    }
                }
            }
        }
        .hot-srh{
            .hot-pic{
                margin-top: vw(31);
                display: flex;
                .left{
                    width: vw(280);
                }
                .right{
                    flex: 1;
                    margin-left: vw(9);
                    display: flex;
                    flex-direction: column;
                    .right-top{
                        height: vw(147);
                    }
                    .right-bottom{
                        flex: 1;
                        margin-top: vw(8);
                        display: flex;
                        .bottom-left{
                            width: vw(195);
                        }
                        .bottom-right{
                            flex: 1;
                            margin-left: vw(11);
                        }
                    }
                }
            }
        }
        .recom-srh{
            margin-top: vw(47);
            .recom-pic{
                margin-top: vw(48);
                display: flex;
                justify-content: space-between;
                img:nth-child(1){
                    width: vw(228);
                }
                img:nth-child(2){
                    width: vw(211);
                }
                img:nth-child(3){
                    width: vw(220);
                }
            }
        }
    }
}